<template>
	<view class="content">
		<nav-bars title="收款" bgColor="transparent" isBack fontColor="#fff"></nav-bars>
		<view class="topBg">
			<image :src="`${baseimg}/static/superHK/topBg.png`" mode=""></image>
		</view>
		<view class="wrapBox">
			<view class="main">
				<view class="tag">
					收款金额
				</view>
				<view class="row-input">￥
					<input class="uni-input" :disabled="disabled" placeholder="请输入收款金额"
						placeholder-style="font-size: 40rpx;" v-model="amount" />
				</view>
			</view>
			<neoceansoft-keyboard @keyclick="numclick" @result="result" keyboardType="payment"
				:behaviorName="behaviorName" behaviorBgColor="#DBA855" :behaviorTextColor="behaviorTextColor"
				@paymentClick="goPayment">
			</neoceansoft-keyboard>
		</view>
	</view>
</template>

<script>
	import service_enter from '@/service/enter.js'
	export default {
		data() {
			return {
				amount: '',
				behaviorName: '付款',
				disabled: true,
				behaviorTextColor: '#242424', //按钮字体颜色，
				baseimg: this.$static

			}
		},
		onLoad(options) {

		},
		methods: {
			//跳转收款页
			confirm(e) {
				this.$common.navigateTo('/pagesFour/payment/scanPay');
			},
			//收支明细
			goSkip(url) {
				uni.navigateTo({
					url: url
				})
			},
			numclick(e) {

			},
			//付款金额
			result(data) {
				this.amount = data;
				console.log(data)
			},
			goPayment() {
				let money = this.amount;
				if (money == '' || !money) {
					uni.showToast({
						title: '请输入付款金额',
						icon: 'none'
					})
					return
				}
				uni.showLoading()
				service_enter.posOrderMake({
					amount: money,
				}).then(res => {
					if (res.code === 1) {
						uni.hideLoading()
						let data = res.data.verificationCode
						uni.navigateTo({
							url: '/pagesFour/posPayment/scanPay?amount=' + this.amount +
								'&verificationCode=' + data
						})
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						//this.$common.navigateTo('/pages/login/posLogin')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;

		.topBg {
			width: 100%;
			height: 340rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index:-1;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.wrapBox{
			width: 100%;
			height:calc(100vh - 200rpx);
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: #FFFFFF;
			.head {
				width: 100%;
				height: auto;
				padding: 40rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					width: auto;
					height: 53rpx;
					font-size: 56rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #242424;
					line-height: 40rpx;
					border-bottom: 16rpx solid #FF6042;
				}

				.row-right {
					image {
						vertical-align: middle;
						width: 46rpx;
						height: 46rpx;
						margin-right: 6rpx;
					}

					text {
						color: #242424;
					}
				}

			}

			.main {
				margin-top: 80rpx;
				width: 100%;
				height: 100%;
				padding: 20rpx;

				.tag {
					margin-top: 20rpx;
					color: #242424;
				}

				.row-input {
					width: 100%;
					height: 180rpx;
					display: flex;
					border-bottom: 1px solid #BFBFBF;
					line-height: 180rpx;
					font-size: 90rpx;

					input {
						height: 180rpx;
						font-size: 90rpx;
						line-height: 180rpx;
					}
				}
			}
		}
	}
</style>
